@extends('front.frame_layout')
@section('head')
    <title>找回密码</title>
    <link rel="stylesheet" href="{{asset('front/css/password-retereval.css')}}">
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .grey {
            background: grey !important;
        }
    </style>
@endsection
@section('content')
    <div class="password-retrieval">
        <!--pc找回密码头部-->
        <div class="pc-pr-head  hidden-xs">
            <h2><img src="{{asset('front/img/ybjflogo.png')}}" onclick="window.location='{{route('login.page')}}'"
                     style="cursor: pointer" alt="logo"><span class="pr-zhmm">找回密码</span></h2>
            <!--<p
                    class="register-mbx"><span class="register-tx"><i class="iconfont icon-1 u-i1"></i>填写注册信息</span><i
                    class="iconfont icon-jiantouyou u-ir"></i><span class="register-cg"><i
                    class="iconfont icon-num2_ u-i2"></i>注册成功</span></p></h2>-->
        </div>
        <!--app找回密码头部-->
        <div class="app-pr-head visible-xs-block">
            <i class="iconfont icon-zuo"></i>找回密码
        </div>
        <!--找回密码表单-->
        <div class="pr-form">
            <h3 class="pr-form-title"><span>手机找回</span><span>邮箱找回</span></h3>
            <div class="pr-form-main">
                <form method="post" class="backForm" id="find_form" autocomplete="on"
                      action="{{route('login.find.act')}}">
                    {!! csrf_field() !!}
                    <input type="hidden" name="flag" id="flag">
                    <ul>
                        <li>
                            <label for="name" class="hidden-xs">找回密码类型：</label>
                            <select name="type" class="pr-ipt">
                                <option value="1">找回登录密码</option>
                                <option value="2">找回交易密码</option>
                            </select>
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="name" class="hidden-xs">用户名：</label>
                            <input id="name" name="name" class="pr-ipt username" type="text"
                                   placeholder="请输入你要找回密码的用户名">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="tel" class="hidden-xs">手机号：</label>
                            <input id="tel" name="tel" class="pr-ipt tel" type="text" placeholder="请输入绑定手机号">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="code" class="hidden-xs">验证码：</label>
                            <input id="code" name="code" class="pr-ipt pr-ipt-s code" type="text"
                                   placeholder="请输入验证码">
                            <img class="yzm-img" src="{{route('coms.user-code')}}" onclick="refreshCode(this)"
                                 alt="点击刷新">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="sms_code" class="hidden-xs">手机验证码：</label>
                            <input id="sms_code" name="sms_code" class="pr-ipt pr-ipt-s sms_code" type="text"
                                   placeholder="请输入手机验证码">
                            <input class="getTelYzm" id="getTelYzm" type="button" value="获取验证码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="pass" class="hidden-xs">设置密码：</label>
                            <input id="pass" name="pass" class="pr-ipt pass" type="password" placeholder="请输入新密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="repass" class="hidden-xs">确认密码：</label>
                            <input id="repass" name="repass" class="pr-ipt repass" type="password" placeholder="请确认新密码">
                            <p class="u-ts"></p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <label for="name" class="hidden-xs">密码类型：</label>
                            <select name="e_type" class="pr-ipt">
                                <option value="1">找回登录密码</option>
                                <option value="2">找回交易密码</option>
                            </select>
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="e_name" class="hidden-xs">用户名：</label>
                            <input id="e_name" name="e_name" class="pr-ipt e_name" type="text"
                                   placeholder="请输入你要找回密码的用户名">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="email" class="hidden-xs">邮箱：</label>
                            <input id="email" name="email" class="pr-ipt email" type="email" placeholder="请输入绑定邮箱">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="e_code" class="hidden-xs">验证码：</label>
                            <input id="e_code" name="e_code" class="pr-ipt pr-ipt-s e_code" type="text"
                                   placeholder="请输入验证码">
                            <img class="yzm-img" src="{{route('coms.user-code')}}" onclick="refreshCode(this)"
                                 alt="点击刷新">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="email_code" class="hidden-xs">邮箱验证码：</label>
                            <input id="email_code" name="email_code" class="pr-ipt pr-ipt-s email_code" type="text"
                                   placeholder="请输入邮箱验证码">
                            <input class="getTelYzm" id="getEmailYzm" type="button" value="获取验证码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="e_pass" class="hidden-xs">设置密码：</label>
                            <input id="e_pass" name="e_pass" class="pr-ipt e_pass" type="password"
                                   placeholder="请输入新密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="e_repass" class="hidden-xs">确认密码：</label>
                            <input id="e_repass" name="e_repass" class="pr-ipt e_repass" type="password"
                                   placeholder="请确认新密码">
                            <p class="u-ts"></p>
                        </li>
                    </ul>
                    <div class="pr-form-submit text-center">
                        <button id="findButton" type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('footer')
    <script>
        {{-- 刷新验证码 --}}
        function refreshCode(obj) {
            obj.src = "{{route('coms.user-code')."?code="}}" + Math.random();
        }
        // 找回密码选项卡
        $('.pr-form-title span').on('touchend click', function (e) {
            e.preventDefault();
            $(this).addClass('pr-ft-this').siblings().removeClass('pr-ft-this');
            var index = $(this).index();
            $('.pr-form-main ul').eq(index).css({display:"block"}).siblings('ul').css({display:"none"});
            index == 0 ? $('#flag').val('1') : $('#flag').val('2')
        }).eq(0).click();




        // 验证规则
        $('#find_form').validate({
            rules: {
                name: {
                    required: true,
                    username: true
                },
                tel: {
                    required: true,
                    isMobile: true
                },
                code: {
                    required: true
                },
                sms_code: {
                    required: true
                },
                pass: {
                    required: true,
                    password: true
                },
                repass: {
                    required: true,
                    equalTo: '#pass'
                },
                e_name: {
                    required: true,
                    username: true
                },
                email: {
                    required: true,
                    email: true
                },
                e_code: {
                    required: true
                },
                email_code: {
                    required: true
                },
                e_pass: {
                    required: true,
                    password: true
                },
                e_repass: {
                    required: true,
                    equalTo: '#e_pass'
                }
            },
            messages: {
                name: {
                    required: '请填写要找回密码的用户名'
                },
                tel: {
                    required: "请填写绑定手机号"
                },
                code: {
                    required: "请填写验证码"
                },
                sms_code: {
                    required: "请填写短信验证码"
                },
                pass: {
                    required: "请设置新密码",
                },
                repass: {
                    required: "请确认新密码",
                    equalTo: "两次输入密码不一致"
                },
                e_name: {
                    required: '请填写要找回密码的用户名'
                },
                email: {
                    required: "请输入绑定邮箱",
                    email: "请输入正确的邮箱格式"
                },
                e_code: {
                    required: "请填写验证码"
                },
                email_code: {
                    required: "请填写邮箱验证码"
                },
                e_pass: {
                    required: "请设置新密码"
                },
                e_repass: {
                    required: "请确认新密码",
                    equalTo: '两次输入密码不一致'
                }
            },
            errorPlacement: function (error, element) {
                $(element).siblings('.u-ts').html(error)
            },
            errorElement: 'span',
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    type: "post",
                    beforeSend: function () {
                        $("#findButton").addClass('grey').attr('disabled', 'disabled');
                    },
                    success: function (data) {
                        $("#findButton").removeClass('grey').removeAttr('disabled');
                        $(".yzm-img").attr('src', "{{route('coms.user-code')."?code="}}" + Math.random());
                        if (data.code == 0) {
                            toastr["success"](data.msg);
                            setInterval(function () {
                                window.location = "{{route('login.page')}}";
                            }, 2000);
                        } else {
                            toastr["error"](data.msg);
                        }
                    }
                });
            }
        });

        $('#getTelYzm').on('touchend click', function (e) {
            e.preventDefault();
            //手机号验证
            var tel = $("#tel").val();
            var rule = /^[1][34578][\d]{9}$/.test(tel);
            if (rule) {
                $("#tel").removeClass('error').siblings('p').html('')
            } else {
                $("#tel").addClass('error').siblings('p').html('请输入正确手机号');
                return false;
            }

            var name = $("#name").val();
            var uname = /^[a-zA-Z0-9]{5,16}$/.test(name);
            if (uname) {
                $("#name").removeClass('error').siblings('p').html('')
            } else {
                $("#name").addClass('error').siblings('p').html('请输入正确用户名');
                return false;
            }

            var self = $("#getTelYzm");
            $.ajax({
                type: "POST",
                url: "/send-code/" + name + "/" + tel,
                dataType: "json",
                beforeSend: function () {
                    self.addClass('yfs').attr('disabled', 'disabled');
                },
                success: function (data) {
                    if (data.code == 0) {
                        toastr.success(data.msg);
                        var num = 120, timer;
                        self.addClass('yfs').val('重新发送（' + num + '）');
                        timer = setInterval(function () {
                            num--;
                            self.val('重新发送（' + num + '）');
                            if (num <= 0) {
                                clearInterval(timer);
                                self.removeClass('yfs').removeAttr('disabled').val('获取验证码');
                            }
                        }, 1000);
                    }
                    if (data.code == 1) {
                        toastr.error(data.msg);
                        self.removeClass('yfs').removeAttr('disabled').val('获取验证码');
                    }
                }
            });
        });

        $('#getEmailYzm').on('touchend click', function (e) {
            e.preventDefault();
            //手机号验证
            var email = $("#email").val();
            var rule = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(email);
            if (rule) {
                $("#email").removeClass('error').siblings('p').html('')
            } else {
                $("#email").addClass('error').siblings('p').html('请输入正确邮箱');
                return false;
            }

            var self = $("#getEmailYzm");
            $.ajax({
                type: "POST",
                url: "/send-common-email/" + email,
                dataType: "json",
                beforeSend: function () {
                    self.addClass('yfs').attr('disabled', 'disabled');
                },
                success: function (data) {
                    if (data.code == 0) {
                        toastr.success(data.msg);
                        var num = 300, timer;
                        self.addClass('yfs').val('重新发送（' + num + '）');
                        timer = setInterval(function () {
                            num--;
                            self.val('重新发送（' + num + '）');
                            if (num <= 0) {
                                clearInterval(timer);
                                self.removeClass('yfs').removeAttr('disabled').val('获取验证码');
                            }
                        }, 1000);
                    }
                    if (data.code == 1) {
                        toastr.error(data.msg);
                        self.removeClass('yfs').removeAttr('disabled').val('获取验证码');
                    }
                }
            });
        });

    </script>
@endsection